<template>
  <article class="media">
    <div class="media-content">
      <form @submit.prevent="onSubmit">
        <b-field>
          <b-input
            v-model.lazy="commentText"
            type="textarea"
            maxlength="200"
            placeholder="Add a comment..."
            :disabled="isLoading"
          ></b-input>
        </b-field>
        <nav class="level">
          <div class="level-left">
            <b-button
              type="is-primary"
              native-type="submit"
              class="level-item"
              :disabled="isLoading"
            >
              提交
            </b-button>
          </div>
        </nav>
      </form>
    </div>
  </article>
</template>

<script>
import { pushComment } from '@/api/comment'

export default {
  name: 'LvCommentsForm',
  data () {
    return {
      commentText: '',
      isLoading: false
    }
  },
  props: {
    slug: {
      type: String,
      default: null
    }
  },
  methods: {
    async onSubmit () {
      this.isLoading = true
      if (this.commentText.trim().length === 0) {
        this.$message.error('不能为空')
        this.isLoading = false
      } else {
        try {
          const postData = {}
          // console.log(this.commentText)
          postData.content = this.commentText.trim()
          postData.topic_id = this.slug
          console.log(postData)
          await pushComment(postData)
          this.$emit('loadComments', this.slug)
          this.$message.success('留言成功')
          // console.log(this.slug)   = topic_id
          this.commentText = ''
        } catch (e) {
          this.$buefy.toast.open({
            message: `不能发布这个评论. ${e}`,
            type: 'is-danger'
          })
        } finally {
          this.isLoading = false
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>

textarea .textarea {
    resize: none;
}
</style>
